{%extends "base.html"%}
{%block title%}
验证邮箱
{%endblock%}
{%block body%}
<script>

    let emailAuth;
    $(document).ready(() => {
        let token = decodeURIComponent(decodeURIComponent(window.location.href.split("/").pop()));
        emailAuth = new Vue({
            el: "#email-auth",
            delimiters: ['{[', ']}'],
            mixins: [baseMixin],
            data: {
                errorMessage: "",
                username: "",
                token: token,
                successMessage: "",
                loading: false
            }, methods: {
                submit: function () {

                    this.errorMessage = this.successMessage = "";
                    if (!this.username) {
                        this.errorMessage = "请输入用户名";
                        return;
                    }
                    this.loading = true;

                    $.post("/api/auth_email", {
                        username: this.username, token: this.token
                    }).done(function (ctx) {
                        this.loading = false;
                        ctx = JSON.parse(ctx);
                        console.log(ctx);
                        if (ctx.code == 0) {
                            window.location.href = "/";
                        } else {
                            // console.log(this);
                            emailAuth.errorMessage = ctx.message;
                            // this.errorMessage = ctx.message;
                        }

                    });
                }
            }
        });
    });

</script>
<div style="top:10%;max-width: 500px;">
    <div class="ui left aligned container">
        <div class="ui header">
            <h1>验证邮箱</h1>
        </div>
        <div class="ui stack segment" id="email-auth">

            <div class="ui form" v-bind:class="{error:errorMessage!='',success:successMessage!=''}">
                <div class="ui field">
                    <label>用户名:</label>
                    <input type="text" placeholder="请输入用户名(非邮箱).." v-model="username" v-on:keyup.enter="submit">
                </div>

                <div class="ui error message">
                    <div class="header">错误</div>
                    <p>{[errorMessage]}</p>
                </div>
                <div class="ui success message">
                    <div class="header">成功</div>
                    <p>{[successMessage]}</p>
                </div>
                <div class="ui green submit button" v-on:click="submit">提交</div>
            </div>
        </div>
    </div>
</div>
{%endblock%}